<template>
  <div>
    <van-nav-bar
      class="app-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    >
    </van-nav-bar>
    <!-- 修改头像 -->
      <input type="file" hidden ref="inp" accept="image/*" @change="onFileChange">
      <van-cell title="头像" is-link center @click="$refs.inp.click()">
        <van-image
          width="20"
          height="20"
          fit="cover"
          round
          :src="userProfile.photo"
        >
        </van-image>
      </van-cell>
        <van-popup
        class="updatephoto"
        v-model="isPhotoShow"
        position="bottom"
        style="height:100%"
      >
        <updata-photo v-if="isPhotoShow" :file="previewImage" @close="isPhotoShow=false" @updata-photo="userProfile.photo=$event"></updata-photo>
      </van-popup>
      <!-- 修改昵称 -->
       <van-cell @click="isEditShow=true" title="昵称" is-link :value="userProfile.name"></van-cell>
        <van-popup
         v-model="isEditShow"
         position="bottom"
         :style="{height:'100%'}"
        >
          <UpdataName @close="isEditShow=false" :name="userProfile.name" @onConfirm="onConfirm"></UpdataName>
        </van-popup>
        <!-- 修改性别 -->
      <van-cell @click="isSexShow=true" title="性别" is-link :value="userProfile.gender===0?'男':'女'"></van-cell>
       <van-popup
         v-model="isSexShow"
         position="bottom"
         :style="{height:'40%'}"
        >
        <UpdataAge @close="isSexShow=false" @updataAge="userProfile.gender=$event" :number="userProfile.gender"></UpdataAge>
      </van-popup>
      <!-- 修改生日 -->
      <van-cell @click="isbirShow=true" title="生日" is-link :value="userProfile.birthday"></van-cell>
       <van-popup
         v-model="isbirShow"
         position="bottom"
         :style="{height:'40%'}"
        >
      <UpdataBirthday v-if="isbirShow" @close="isbirShow=false" @updata-birthday="userProfile.birthday=$event" :birthday="userProfile.birthday"></UpdataBirthday>
      </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from '../../api/user.js'
import UpdataBirthday from './components/UpdataBirthday.vue';
import UpdataName from './components/UpdataName.vue';
import UpdataAge from './components/UpdataAge.vue';
import UpdataPhoto from './components/UpdataPhoto.vue';
export default {
  name: "UserProfile",
  created() {
    this.loadUserProfile()
  },
  data() {
    return {
      userProfile:{},
      isEditShow:false,
      isSexShow:false,
      isbirShow:false,
      isPhotoShow:false,
      previewImage:null  // 所选择的要裁切的图片
    };
  },
  props: {},
  methods: {
    async loadUserProfile(){
      const {data}=await getUserProfile()
      this.userProfile = data.data
    },
    onFileChange(){
      // 展示弹出层
      this.isPhotoShow=true
      // 获取所选择的文件
      // window.URL.createObjectURL(file)  转化为blob
      const file = this.$refs.inp.files[0]
      this.previewImage=file
      // 为了解决相同文件不触发change事件
      this.$refs.inp.value-''
    },
    onConfirm(name){
      this.userProfile.name=name,
      this.isEditShow=false
    }
  },
  components:{
    UpdataName,
    UpdataAge,
    UpdataBirthday,
    UpdataPhoto
  }
};
</script>

<style lang="less" scoped>
/deep/.app-nav-bar{
  background:#3296fa;
  .van-nav-bar__title{
        color: snow;
    }
    .van-nav-bar__arrow{
        color: snow;
    }
}
.updatephoto{
  background: #000;
}
</style>
